js: Use GObject properties for animated properties

Clutter animations work on GObject properties on animatables. The
last commit took care of the latter by turning all animated objects
into actor subclasses, now it's time to make all properties used
in Tweens into GObject properties.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/666

diff --git a/js/ui/keyboard.js b/js/ui/keyboard.js
index 74377838927db6473b398b9c2ba4ffa2d27795c5..1d26e61435fda8eb0cdfa1c0346c133c7b498fbd 100644 (file)
--- a/js/ui/keyboard.js
+++ b/js/ui/keyboard.js
@@ -571,6 +571,12 @@ var FocusTracker = class {
 Signals.addSignalMethods(FocusTracker.prototype);
 
 var EmojiPager = GObject.registerClass({
+    Properties: {
+        'delta': GObject.ParamSpec.int(
+            'delta', 'delta', 'delta',
+            GObject.ParamFlags.READWRITE,
+            0, GLib.MAXINT32, 0)
+    },
     Signals: {
         'emoji': { param_types: [GObject.TYPE_STRING] },
         'page-changed': {
@@ -619,7 +625,11 @@ var EmojiPager = GObject.registerClass({
         else if (value < -this._width)
             value = -this._width;
 
+        if (this._delta == value)
+            return;
+
         this._delta = value;
+        this.notify('delta');
 
         if (value == 0)
             return;

diff --git a/js/ui/lightbox.js b/js/ui/lightbox.js
index 189d29547b5e313d33904c9f8cab2ee3c809bcd5..0f257815489d3b57bab35f939800b139d0eb8666 100644 (file)
--- a/js/ui/lightbox.js
+++ b/js/ui/lightbox.js
@@ -24,16 +24,31 @@ t = clamp(t, 0.0, 1.0);\n\
 float pixel_brightness = mix(1.0, 1.0 - vignette_sharpness, t);\n\
 cogl_color_out.a = cogl_color_out.a * (1 - pixel_brightness * brightness);';
 
-var RadialShaderEffect = GObject.registerClass(
-class RadialShaderEffect extends Shell.GLSLEffect {
+var RadialShaderEffect = GObject.registerClass({
+    Properties: {
+        'brightness': GObject.ParamSpec.float(
+            'brightness', 'brightness', 'brightness',
+            GObject.ParamFlags.READWRITE,
+            0, 1, 1
+        ),
+        'sharpness': GObject.ParamSpec.float(
+            'sharpness', 'sharpness', 'sharpness',
+            GObject.ParamFlags.READWRITE,
+            0, 1, 0
+        )
+    }
+}, class RadialShaderEffect extends Shell.GLSLEffect {
     _init(params) {
+        this._brightness = undefined;
+        this._sharpness = undefined;
+
         super._init(params);
 
         this._brightnessLocation = this.get_uniform_location('brightness');
         this._sharpnessLocation = this.get_uniform_location('vignette_sharpness');
 
         this.brightness = 1.0;
-        this.vignetteSharpness = 0.0;
+        this.sharpness = 0.0;
     }
 
     vfunc_build_pipeline() {
@@ -46,19 +61,25 @@ class RadialShaderEffect extends Shell.GLSLEffect {
     }
 
     set brightness(v) {
+        if (this._brightness == v)
+            return;
         this._brightness = v;
         this.set_uniform_float(this._brightnessLocation,
                                1, [this._brightness]);
+        this.notify('brightness');
     }
 
-    get vignetteSharpness() {
+    get sharpness() {
         return this._sharpness;
     }
 
-    set vignetteSharpness(v) {
+    set sharpness(v) {
+        if (this._sharpness == v)
+            return;
         this._sharpness = v;
         this.set_uniform_float(this._sharpnessLocation,
                                1, [this._sharpness]);
+        this.notify('sharpness');
     }
 });
 
@@ -159,7 +180,7 @@ var Lightbox = class Lightbox {
             Tweener.removeTweens(effect);
             Tweener.addTween(effect,
                              { brightness: VIGNETTE_BRIGHTNESS,
-                               vignetteSharpness: VIGNETTE_SHARPNESS,
+                               sharpness: VIGNETTE_SHARPNESS,
                                time: fadeInTime / 1000,
                                transition: 'easeOutQuad',
                                onComplete: () => {
@@ -193,7 +214,7 @@ var Lightbox = class Lightbox {
             Tweener.removeTweens(effect);
             Tweener.addTween(effect,
                              { brightness: 1.0,
-                               vignetteSharpness: 0.0,
+                               sharpness: 0.0,
                                opacity: 0,
                                time: fadeOutTime / 1000,
                                transition: 'easeOutQuad',

diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 9ada31e9ee5c380988d031a2057bcef89a6d4992..30cd1e108cd0b019c3977224c4d1b0fac3f6df7d 100644 (file)
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -26,11 +26,21 @@ var SlideDirection = {
     RIGHT: 1
 };
 
-var SlideLayout = GObject.registerClass(
-class SlideLayout extends Clutter.FixedLayout {
+var SlideLayout = GObject.registerClass({
+    Properties: {
+        'slide-x': GObject.ParamSpec.double(
+            'slide-x', 'slide-x', 'slide-x',
+            GObject.ParamFlags.READWRITE,
+            0, 1, 1),
+        'translation-x': GObject.ParamSpec.double(
+            'translation-x', 'translation-x', 'translation-x',
+            GObject.ParamFlags.READWRITE,
+            -Infinity, Infinity, 0)
+    }
+}, class SlideLayout extends Clutter.FixedLayout {
     _init(params) {
         this._slideX = 1;
-        this._translationX = undefined;
+        this._translationX = 0;
         this._direction = SlideDirection.LEFT;
 
         super._init(params);
@@ -70,12 +80,17 @@ class SlideLayout extends Clutter.FixedLayout {
         child.allocate(actorBox, flags);
     }
 
-    set slideX(value) {
+    // eslint-disable-next-line camelcase
+    set slide_x(value) {
+        if (this._slideX == value)
+            return;
         this._slideX = value;
+        this.notify('slide-x');
         this.layout_changed();
     }
 
-    get slideX() {
+    // eslint-disable-next-line camelcase
+    get slide_x() {
         return this._slideX;
     }
 
@@ -88,12 +103,17 @@ class SlideLayout extends Clutter.FixedLayout {
         return this._direction;
     }
 
-    set translationX(value) {
+    // eslint-disable-next-line camelcase
+    set translation_x(value) {
+        if (this._translationX == value)
+            return;
         this._translationX = value;
+        this.notify('translation-x');
         this.layout_changed();
     }
 
-    get translationX() {
+    // eslint-disable-next-line camelcase
+    get translation_x() {
         return this._translationX;
     }
 });
@@ -127,7 +147,7 @@ var SlidingControl = class {
     }
 
     _updateSlide() {
-        Tweener.addTween(this.layout, { slideX: this._getSlide(),
+        Tweener.addTween(this.layout, { slide_x: this._getSlide(),
                                         time: SIDE_CONTROLS_ANIMATION_TIME / 1000,
                                         transition: 'easeOutQuad' });
     }
@@ -161,11 +181,11 @@ var SlidingControl = class {
             translationEnd = translation;
         }
 
-        if (this.layout.translationX == translationEnd)
+        if (this.layout.translation_x == translationEnd)
             return;
 
-        this.layout.translationX = translationStart;
-        Tweener.addTween(this.layout, { translationX: translationEnd,
+        this.layout.translation_x = translationStart;
+        Tweener.addTween(this.layout, { translation_x: translationEnd,
                                         time: SIDE_CONTROLS_ANIMATION_TIME / 1000,
                                         transition: 'easeOutQuad' });
     }
@@ -213,13 +233,13 @@ var SlidingControl = class {
 
     slideIn() {
         this._visible = true;
-        // we will update slideX and the translation from pageEmpty
+        // we will update slide_x and the translation from pageEmpty
     }
 
     slideOut() {
         this._visible = false;
         this._updateTranslation();
-        // we will update slideX from pageEmpty
+        // we will update slide_x from pageEmpty
     }
 
     pageEmpty() {
@@ -227,7 +247,7 @@ var SlidingControl = class {
         // selector; this means we can now safely set the full slide for
         // the next page, since slideIn or slideOut might have been called,
         // changing the visiblity
-        this.layout.slideX = this._getSlide();
+        this.layout.slide_x = this._getSlide();
         this._updateTranslation();
     }
 };

diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js
index 51026499a6da368e3cf824503444b82b7b2267ae..989f088d73ffc92846a2a8d42659b07970e97466 100644 (file)
--- a/js/ui/workspaceThumbnail.js
+++ b/js/ui/workspaceThumbnail.js
@@ -244,8 +244,18 @@ var ThumbnailState = {
 /**
  * @metaWorkspace: a #Meta.Workspace
  */
-var WorkspaceThumbnail = GObject.registerClass(
-class WorkspaceThumbnail extends St.Widget {
+var WorkspaceThumbnail = GObject.registerClass({
+    Properties: {
+        'collapse-fraction': GObject.ParamSpec.double(
+            'collapse-fraction', 'collapse-fraction', 'collapse-fraction',
+            GObject.ParamFlags.READWRITE,
+            0, 1, 0),
+        'slide-position': GObject.ParamSpec.double(
+            'slide-position', 'slide-position', 'slide-position',
+            GObject.ParamFlags.READWRITE,
+            0, 1, 0),
+    }
+}, class WorkspaceThumbnail extends St.Widget {
     _init(metaWorkspace) {
         super._init({
             clip_to_allocation: true,
@@ -337,21 +347,31 @@ class WorkspaceThumbnail extends St.Widget {
         }
     }
 
-    set slidePosition(slidePosition) {
+    // eslint-disable-next-line camelcase
+    set slide_position(slidePosition) {
+        if (this._slidePosition == slidePosition)
+            return;
         this._slidePosition = slidePosition;
+        this.notify('slide-position');
         this.queue_relayout();
     }
 
-    get slidePosition() {
+    // eslint-disable-next-line camelcase
+    get slide_position() {
         return this._slidePosition;
     }
 
-    set collapseFraction(collapseFraction) {
+    // eslint-disable-next-line camelcase
+    set collapse_fraction(collapseFraction) {
+        if (this._collapseFraction == collapseFraction)
+            return;
         this._collapseFraction = collapseFraction;
+        this.notify('collapse-fraction');
         this.queue_relayout();
     }
 
-    get collapseFraction() {
+    // eslint-disable-next-line camelcase
+    get collapse_fraction() {
         return this._collapseFraction;
     }
 
@@ -590,8 +610,18 @@ class WorkspaceThumbnail extends St.Widget {
 });
 
 
-var ThumbnailsBox = GObject.registerClass(
-class ThumbnailsBox extends St.Widget {
+var ThumbnailsBox = GObject.registerClass({
+    Properties: {
+        'indicator-y': GObject.ParamSpec.double(
+            'indicator-y', 'indicator-y', 'indicator-y',
+            GObject.ParamFlags.READWRITE,
+            0, Infinity, 0),
+        'scale': GObject.ParamSpec.double(
+            'scale', 'scale', 'scale',
+            GObject.ParamFlags.READWRITE,
+            0, Infinity, 0)
+    }
+}, class ThumbnailsBox extends St.Widget {
     _init() {
         super._init({ reactive: true,
                       style_class: 'workspace-thumbnails',
@@ -843,7 +873,7 @@ class ThumbnailsBox extends St.Widget {
             // an old one which just became empty)
             let thumbnail = this._thumbnails[newWorkspaceIndex];
             this._setThumbnailState(thumbnail, ThumbnailState.NEW);
-            thumbnail.slidePosition = 1;
+            thumbnail.slide_position = 1;
 
             this._queueUpdateStates();
 
@@ -956,7 +986,7 @@ class ThumbnailsBox extends St.Widget {
             if (start > 0 && this._spliceIndex == -1) {
                 // not the initial fill, and not splicing via DND
                 thumbnail.state = ThumbnailState.NEW;
-                thumbnail.slidePosition = 1; // start slid out
+                thumbnail.slide_position = 1; // start slid out
                 this._haveNewThumbnails = true;
             } else {
                 thumbnail.state = ThumbnailState.NORMAL;
@@ -999,7 +1029,11 @@ class ThumbnailsBox extends St.Widget {
     }
 
     set scale(scale) {
+        if (this._scale == scale)
+            return;
+
         this._scale = scale;
+        this.notify('scale');
         this.queue_relayout();
     }
 
@@ -1007,12 +1041,18 @@ class ThumbnailsBox extends St.Widget {
         return this._scale;
     }
 
-    set indicatorY(indicatorY) {
+    // eslint-disable-next-line camelcase
+    set indicator_y(indicatorY) {
+        if (this._indicatorY == indicatorY)
+            return;
+
         this._indicatorY = indicatorY;
+        this.notify('indicator-y');
         this.queue_relayout();
     }
 
-    get indicatorY() {
+    // eslint-disable-next-line camelcase
+    get indicator_y() {
         return this._indicatorY;
     }
 
@@ -1053,7 +1093,7 @@ class ThumbnailsBox extends St.Widget {
             this._setThumbnailState(thumbnail, ThumbnailState.ANIMATING_OUT);
 
             Tweener.addTween(thumbnail,
-                             { slidePosition: 1,
+                             { slide_position: 1,
                                time: SLIDE_ANIMATION_TIME / 1000,
                                transition: 'linear',
                                onComplete: () => {
@@ -1071,7 +1111,7 @@ class ThumbnailsBox extends St.Widget {
         this._iterateStateThumbnails(ThumbnailState.ANIMATED_OUT, thumbnail => {
             this._setThumbnailState(thumbnail, ThumbnailState.COLLAPSING);
             Tweener.addTween(thumbnail,
-                             { collapseFraction: 1,
+                             { collapse_fraction: 1,
                                time: RESCALE_ANIMATION_TIME / 1000,
                                transition: 'easeOutQuad',
                                onComplete: () => {
@@ -1100,7 +1140,7 @@ class ThumbnailsBox extends St.Widget {
         this._iterateStateThumbnails(ThumbnailState.NEW, thumbnail => {
             this._setThumbnailState(thumbnail, ThumbnailState.ANIMATING_IN);
             Tweener.addTween(thumbnail,
-                             { slidePosition: 0,
+                             { slide_position: 0,
                                time: SLIDE_ANIMATION_TIME / 1000,
                                transition: 'easeOutQuad',
                                onComplete: () => {
@@ -1241,14 +1281,14 @@ class ThumbnailsBox extends St.Widget {
             let thumbnail = this._thumbnails[i];
 
             if (i > 0)
-                y += spacing - Math.round(thumbnail.collapseFraction * spacing);
+                y += spacing - Math.round(thumbnail.collapse_fraction * spacing);
 
             let x1, x2;
             if (rtl) {
-                x1 = box.x1 + slideOffset * thumbnail.slidePosition;
+                x1 = box.x1 + slideOffset * thumbnail.slide_position;
                 x2 = x1 + thumbnailWidth;
             } else {
-                x1 = box.x2 - thumbnailWidth + slideOffset * thumbnail.slidePosition;
+                x1 = box.x2 - thumbnailWidth + slideOffset * thumbnail.slide_position;
                 x2 = x1 + thumbnailWidth;
             }
 
@@ -1291,7 +1331,7 @@ class ThumbnailsBox extends St.Widget {
             // We round the collapsing portion so that we don't get thumbnails resizing
             // during an animation due to differences in rounded, but leave the uncollapsed
             // portion unrounded so that non-animating we end up with the right total
-            y += thumbnailHeight - Math.round(thumbnailHeight * thumbnail.collapseFraction);
+            y += thumbnailHeight - Math.round(thumbnailHeight * thumbnail.collapse_fraction);
         }
 
         if (rtl) {
@@ -1322,9 +1362,9 @@ class ThumbnailsBox extends St.Widget {
         this._animatingIndicator = true;
         let indicatorThemeNode = this._indicator.get_theme_node();
         let indicatorTopFullBorder = indicatorThemeNode.get_padding(St.Side.TOP) + indicatorThemeNode.get_border_width(St.Side.TOP);
-        this.indicatorY = this._indicator.allocation.y1 + indicatorTopFullBorder;
+        this.indicator_y = this._indicator.allocation.y1 + indicatorTopFullBorder;
         Tweener.addTween(this,
-                         { indicatorY: thumbnail.allocation.y1,
+                         { indicator_y: thumbnail.allocation.y1,
                            time: WorkspacesView.WORKSPACE_SWITCH_TIME / 1000,
                            transition: 'easeOutQuad',
                            onComplete: () => {